<template>
  <div class="app-container">
    <el-form
      ref="form"
      class="form"
      :rules="rules"
      :model="form"
      label-width="120px"
    >
      <el-form-item label="商品分类名称" prop="typeName">
        <el-input
          v-model="form.typeName"
          placeholder="请输入商品分类名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="商品分类排序" prop="sortNo">
        <el-input-number
          style="width: 100%"
          v-model="form.sortNo"
          :min="1"
          step-strictly
          placeholder="请输入鞋架编码"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="商品分类备注">
        <el-input
          type="textarea"
          v-model="form.remark"
          placeholder="请输入商品分类备注"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="商品分类图片"
        prop="url"
        :rules="[
          { required: true, message: '请上传商品分类图片', trigger: 'change' },
        ]"
      >
        <el-upload
          :action="`${BASE_URL}/common/images/upload`"
          accept="image/jpeg,image/jpg,image/png"
          :limit="1"
          :class="{ disabled: uploadDisabled }"
          list-type="picture-card"
          :file-list="pictureList"
          :on-remove="handleUploadChange"
          :on-change="handleUploadChange"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{
          form.id ? "保存修改" : "立即创建"
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getProductCategoryDetail,
  addOrEditProductCategory,
} from "@/api/product/index";
import { BASE_URL, IMAGE_OSS_URL } from "@/config/index";

export default {
  data() {
    return {
      BASE_URL,
      IMAGE_OSS_URL,
      form: {
        typeName: "",
        sortNo: "",
        url: "",
        remark: "",
      },
      loading: false,
      pictureList: [],
      rules: {
        typeName: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
        ],
        sortNo: [
          { required: true, message: "请输入商品分类排序", trigger: "blur" },
        ],
        url: [
          { required: true, message: "请上传商品分类图片", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    uploadDisabled: function () {
      return this.form.url;
    },
  },
  created() {
    if (this.$route.query.id) {
      this.getDetail();
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          addOrEditProductCategory({
            ...this.form,
            url: this.pictureList.map((item) => item.response.data).join(","),
          })
            .then((res) => {
              this.loading = false;
              this.$message.success("操作成功");
              this.$router.push("/product/categories");
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    getDetail() {
      getProductCategoryDetail(this.$route.query.id).then((res) => {
        this.form = res.data;
        this.pictureList = this.form.url.split(",").map((item) => ({
          url: IMAGE_OSS_URL + item,
          status: "success",
          response: {
            data: item,
          },
        }));
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isLt2M;
    },
    handleUploadChange(file, fileList) {
      this.pictureList = fileList;
      this.form.url = fileList.map((item) => item.url).join(",");
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  width: 480px;
}
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
